import { Link, Construction } from '@brillout/docpress'

If you get an error like this:

```
[Wrong Usage] title defined by /pages/+config.js must be defined using a separate file +title.js
```

Then this means you're trying to define runtime code inside <Link href="/config">a config file (e.g. `+config.js`)</Link> which is forbidden.

```ts
// pages/+config.ts

import type { Config, PageContextServer } from 'vike/types'

export default {
  // ❌ Forbidden: the function title() is runtime code
  title: (pageContext: PageContextServer) => pageContext.data.title
} satisfies Config
```

> The `title()` function is called at runtime (when the page is rendered) and *not* at config time (when Vike loads `+config.js` files).

Instead do this:

```ts
// pages/+title.ts

// ✅ Allowed: Vike is able to lazily load this function at runtime

import type { PageContextServer } from 'vike/types'

export default (pageContext: PageContextServer) => pageContext.data.title
```

Or this:

```ts
// pages/+config.ts

// ✅ Allowed: same as defining +title.ts

import type { Config } from 'vike/types'
import title from './title' with { type: 'pointer' }

export default {
  title
} satisfies Config
```

<Construction>The `with { type: 'pointer' }` import attribute isn't implement yet, see workaround at [#1500](https://github.com/vikejs/vike/issues/1500).</Construction>

See <Link href="/config#pointer-imports" /> to understand why you cannot define runtime code inside `+config.js`.


## See also

- <Link href="/config#pointer-imports" />
